<!--
 * @Author: yuqy
 * @Date: 2023-04-10 19:26:39
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-23 13:54:48
 * @Descripttion: -
-->

<template>
  <div>
    <div class="contain_wrap">
      <div class="live_wrap " :class="{'open_white_boarding':isOpenWhiteboard}" >
        <!-- 展示直播讲师视频信息 -->
        <!-- <live-wrap v-if="showLiveing" :liveUrl="liveUrl"/> -->
        <!-- 展示互动讲师视频信息 -->
        <div class="video_wrap" :class="{'video_wrap_half': onSpeakerUserList.length > 0}"  id="listenSpeaker_live_video" />
        <!-- 展示当前正在发言听讲的画面 -->
        <div class='live_other_wrap' v-if="onSpeakerUserList.length > 0" > 
          <div v-for="(user, index) in onSpeakerUserList" :key='index'>
            <p>互动听众: {{ user.uid }} </p>
            <div class='other_video_wrap' :id="'onOtherSpeaker_live_video' + user.uid"></div>
          </div>  
        </div> 
      </div>
    </div>
    <!-- 展示画板的时候，需要放在最底层 -->
    <div class="teacherBoard" v-if="isOpenWhiteboard && roomToken">
      <WhiteBoardWrap
        :appIdentifier="appIdentifier"
        :uid="uid"
        :uuid="uuid"
        :roomToken="roomToken"
        :nickName="nickName"
      />
      <div class="is_not_write_bg" v-if="isAllWrite" />
    </div>
  </div>
</template>
<script >
import { Message } from "view-ui-plus";
import { useStore } from "vuex";
import { getAction } from "@/api";
import { ref, onBeforeMount, reactive, toRefs, computed } from "vue";
import { getStoreMap, getStoreModulesMap } from "@/store/storeMap";
import util from "@/libs/util";
import mixin from "@/mixins/mixinsSpeak.js";
import agora from "@/mixins/agora.js";
import websocket from "@/mixins/websocket.js";
import whiteboard from "@/mixins/whiteboard.js";
export default {
  name: "listenSpeaker",
  setup() {},
  mixins: [mixin, agora, whiteboard, websocket],
  data() {
    return {
      onSpeakerUserList: [], // 正在发言的听众
    };
  },
  async created() {
    this.role = "audience";
    // 更新uid
    this.getListenUid();
    // 观看直播类型
    let joinType = this.$route.query.joinType;
    if (joinType && joinType == 2) {
      this.isShowLiveWrap = true
    }
  },
  methods: {
    // 退出房间后的回调
    downClassSuccess(res, show) {
      // 处于观看直播模式，直接关闭页面  回到主讲页面
      if (this.isShowLiveWrap) {
        if (!this.APP_IS_Web) {
          window.electronAPI.resize("close", {});
        }
        this.sendCommonMsg("88");
        return this.$router.push("./home");
      }
      if (show) {
        Message.success({ content: '操作成功！' });
      }
      // 给主讲老师发送，一个消息
      this.sendCommonMsg('88')
      // 关闭当前窗口
      this.closeAllClient()
    }
  }
};
</script>
<style scoped lang="less">
@import url("./less/index.less");
</style>
